iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

學習HTML&CSS的30天系列 第 16

[Day16]整理常用的 HTML 標籤

  • 分享至 

  • xImage
  •  

因為昨天的內容比較多了些,
因此今天會整理有可能使用頻率較高的標籤,
當然最好先記住基本結構或內容會用到的標籤啦~


  • 基本結構、head 內

    標籤 用途

    html|代表這個檔案是 HTML 文件
    head|HTML 文件的表頭,描述了搜尋引擎用的說明、CSS 檔案的連結、網頁標題等
    meta|描述網頁時,包括網頁語系等
    title|網頁標題。使用瀏覽器的標籤或書籤時,會顯示為網頁標題
    link|連結外部檔案,主要用來載入 CSS 檔案
    body|HTML 文件的主要內容部分。裡面描述的內容都會顯示在瀏覽器上

  • 內容

    標籤 用途

    h1~h6|顯示標題,依照數字順序描述
    p|文章的段落
    img|顯示影像,利用 src 屬性設定影像來源
    a|貼上連結,並用 href 屬性設定連結對象
    ul|不指定順序的條列式清單
    ol|有指定順序的條列式清單
    li|條列式清單內的各個項目
    br|換行

  • 表格(個人覺得這個很容易搞混...)

    標籤 用途

    table|顯示表格,包夾整個表格
    tr|包夾表格的一列
    th|製作成為表格標題的儲存格
    td|製作成為表格資料的儲存格

  • 表單

    標籤 用途

    form|製作表單
    < input type="text" >|單行文字輸入欄
    < input type="radio" >|選項按鈕。只能從選項中選擇其中一個項目
    < input type="checkbox" >|核取方塊。可以選取多個項目
    < input type="submit" >|送出按鈕
    select|下拉式選單
    option|製作下拉式選單的選項
    textarea|多行文字輸入欄
    label|表單的標籤,連結表單的元件與項目的名稱

  • 分組用的區塊元素

    標籤 用途

    header|網頁頂部的元素,主要包夾 Logo、網頁標題、導覽列選單
    nav|主要的導覽列選單
    article|網頁內的報導部分,用來包夾可以成為獨立網頁的文章內容
    section|擁有一個主題的群組
    main|用來包夾網頁的所有主要內容
    aside|非本文的補充資料,用於和主內容關聯性較低的資料
    footer|網頁底部的頁尾區塊元素。通常包含版權及社群媒體連結等
    div|沒有特定意義的區塊元素


今天的內容主要是在為了前面的所有標籤做個小總結,
當然肯定還有很多我裡面沒有講到的標籤,
不過這是我學到現在認為應該會比較常用到的標籤元素,
因此應該可以加減看啦。

那麼我是沒魚,這是我的第十六天,今天就算個小整理吧!/images/emoticon/emoticon29.gif

<上一篇> [Day15]用區塊元素將內容分組
<下一篇> [Day17]如何在 HTML 中使用 CSS


上一篇
[Day15]用區塊元素將內容分組
下一篇
[Day17]如何在 HTML 中使用 CSS&建立 CSS 檔案
系列文
學習HTML&CSS的30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言